<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title>HappyOJ</title>
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <link rel="stylesheet" th:href="@{/js/xterm/xterm.css}">
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
    <script th:src="@{/js/xterm/xterm.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar">
            <div th:replace="admin/admin-common::admin-navbar"></div>
            Proxy IP: <input id="term_proxy" style="width: 128px;" maxlength="32" th:value="${proxyAddress}"/>
            Telnet IP: <input id="term_ip" style="width: 128px;" maxlength="32" value="127.0.0.1"/>
            Port: <input id="term_port" style="width: 48px;" maxlength="6" value="23"/>
            SSL: <input id="ssl" style="width: 48px;" maxlength="6" value="1"/>
            <input id="term_connect" style="width: 86px;" type="Submit" value="connect" />
            <div id="terminal"></div>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
<script>
    let term = new Terminal({
        rendererType: "canvas", //渲染类型
        cursorStyle: 'underline', //光标样式
        cursorBlink: true, // 光标闪烁
        convertEol: true, //启用时，光标将设置为下一行的开头
        disableStdin: false, //是否应禁用输入。
        rows: 30, //行数
        theme: {
            foreground: 'yellow', //字体
            background: '#060101', //背景色
            cursor: 'help',//设置光标
        }
    });

    term.open(document.getElementById('terminal'));

    var websocket;

    function connect() {
        var term_proxy = document.getElementById('term_proxy').value;
        var ip = document.getElementById('term_ip').value;
        var port = document.getElementById('term_port').value;
        var ssl = document.getElementById('ssl').value;
        var url = "ws://";
        if (ssl == 1) {
            url = "wss://";
        }
        url += term_proxy + "/ws/websocket/" + ip + ":" + port;
        term.writeln('Connecting to ' + url);
        websocket = new WebSocket(url);
        websocket.onopen = function (evt) {
            websocket.onmessage = function (evt) {//接受到数据
                term.write(evt.data);//把接收的数据写到这个插件的屏幕上
            }
            websocket.onclose = function (evt) {//websocket关闭
                term.writeln("Session closed.");
                $('#term_connect').removeAttr("disabled");
            }
            websocket.onerror = function (evt) {//失败额处理
                if (typeof console.log == "function") {
                    term.writeln('Connecting to '+ip + "failed.");
                    $('#term_connect').removeAttr("disabled");
                }
            }
        }
    };

    var close = function () {//关闭websocket
        websocket.close();
    };

    function runFakeTerminal() {
        term.prompt = () => {
            term.write('\r\n~$ ');
        };

        //prompt(term);

        term.onKey(e => {
            const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey;
            websocket.send(e.key);

            if (e.domEvent.keyCode === 13) {
                //prompt(term);
            } else if (e.domEvent.keyCode === 8) {
                // Do not delete the prompt
                if (term._core.buffer.x > 2) {
                    term.write('\b \b');
                }
            } else if (printable) {
                // close local echo
                //term.write(e.key);
            }
        });
    }

    function prompt(term) {
        term.write('\r\n~$ ');
    }

    runFakeTerminal();

    $("#term_connect").click(function () {
        $('#term_connect').attr('disabled', 'disabled');
        connect();
    });
</script>
</body>
</html>
